<template>
    <div class="list">
        <Head>
            提货函确认
        </Head>
        <div class="list-title">
            <h3>
                <i class="icon icon-head">
                </i>
                上海郑昌实业贸易有限责任公司
            </h3>
            <p>
                郑华成 025-58051112 / 18221831324
            </p>
            <span>
            	采购商
            </span>
        </div>
        <div class="list-titleitem">
            提货信息
        </div>
        <ul class="list-infor">
            <li>
                <span class="span-left">
                    提货类型
                </span>
                <span class="red">
                    {{infor.type}}
                </span>
            </li>
            <li>
                <span class="span-left">
                    发货方式
                </span>
                <span>
                    {{infor.style}}
                </span>
            </li>
            <li>
                <span class="span-left">
                    提货方式
                </span>
                <span class="red">
                    {{infor.style1}}
                </span>
            </li>
            <li>
                <span class="span-left">
                    联系人
                </span>
                <span>
                    {{infor.contact}}
                </span>
            </li>
        </ul>
        <div class="list-titleitem">
            提货明细
        </div>
        <ul class="list-detail">
            <li v-for="item in detail">
                <div>
                    <span class="span-left">
                        订单编号
                    </span>
                    <span>
                        {{item.number}}
                    </span>
                </div>
                <div>
                    <span class="span-left">
                        提函编号
                    </span>
                    <span>
                        {{item.number1}}
                    </span>
                </div>
                <div v-for="(i,index) in item.infor" class="pink">
                    <p>
                        <span class="span-left">
                            货物信息
                        </span>
                        <span>
                            {{i.name}}
                        </span>
                    </p>
                    <p class="p-bottom" :class='getLength(item.infor,index)'>
                        <span class="span-left">
                            预&#12288;&#12288;提
                        </span>
                        <span>
                            <b class="red">
                                {{i.gs}}{{item.infor.length}}
                            </b>
                            件
                            <b class="red">
                                {{i.weight}}
                            </b>
                            吨
                        </span>
                    </p>
                </div>
                <div class="style">
                    <span class="span-left">
                        结算方式
                    </span>
                    <span>
                        {{item.style}}
                    </span>
                </div>
                <div>
                    <span class="span-left">
                        备&#12288;&#12288;注
                    </span>
                    <span>
                        {{item.note}}
                    </span>
                </div>
                <div>
                    <span class="span-left">
                        预提共计
                    </span>
                    <span>
                        <b class="red">
                            {{item.total.gs}}
                        </b>
                        件
                        <b class="red">
                            {{item.total.weight}}
                        </b>
                        吨
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    import Head from './Head'
    import axios from 'axios'


	export default{
		components: {
	       Head
	    },
	    data(){
	    	return{
	    		infor:
	    			{
	    				type:'提货',
	    				style:'按吨数发货',
	    				style1:'沪A 4382C',
	    				contact:'江波  15000190350'

	    			},

	    		detail:[
	    			{
	    				number:'XS16110410864508',
	    				number1:'TH16110410864508-01',
	    				infor:[
	    					{
	    						name:'普卷 / Q235B / 3.0*1250*C / 燕钢',
	    						gs:3,
	    						weight:28.500
	    					},
	    					{
	    						name:'普卷 / Q235B / 3.0*1250*C / 燕钢',
	    						gs:3,
	    						weight:28.500
	    					}
	    				],
	    				style:'提货人自理',
	    				note:'客户要求下午5点之前提货',
	    				total:{
	    					gs:3,
	    					weight:28.500
	    				}
	    			},
	    			{
	    				number:'XS16110410864508',
	    				number1:'TH16110410864508-01',
	    				infor:[
	    					{
	    						name:'普卷 / Q235B / 3.0*1250*C / 燕钢',
	    						gs:3,
	    						weight:28.500
	    					},
	    					{
	    						name:'普卷 / Q235B / 3.0*1250*C / 燕钢',
	    						gs:3,
	    						weight:28.500
	    					}
	    				],
	    				style:'提货人自理',
	    				note:'客户要求下午5点之前提货',
	    				total:{
	    					gs:3,
	    					weight:28.500
	    				}
	    			},
	    			{
	    				number:'XS16110410864508',
	    				number1:'TH16110410864508-01',
	    				infor:[
	    					{
	    						name:'普卷 / Q235B / 3.0*1250*C / 燕钢',
	    						gs:3,
	    						weight:28.500
	    					},
	    					{
	    						name:'普卷 / Q235B / 3.0*1250*C / 燕钢',
	    						gs:3,
	    						weight:28.500
	    					}
	    				],
	    				style:'提货人自理',
	    				note:'客户要求下午5点之前提货',
	    				total:{
	    					gs:3,
	    					weight:28.500
	    				}
	    			}

	    		],
	    		
	    		
	    	}
	    },
	    methods:{
	    	// 最后一项border为0
	    	getLength(a,index){
	    		if(a.length-1==index){
	    			return 'active'
	    		}

	    	},

	    },
         // 获取数据
       // created:function(){
       //  var url='www.baidu.com'
       //        axios.get(url)
       //          .then(response=>{

       //              // 获取的数据为response,然后对detail重新赋值
       //            this.detail=response.data
       //        })
           
       // }
	    

	}
</script>
<style lang="scss" scoped>
    @import '../style/list'
</style>